<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.13/dayjs.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #f5f5f5;
      }
      h1 {
        color: #af4248;
        text-align: center;
      }
      .content {
        width: 600px;

        background: white;
        margin: 0 auto;
      }
      input {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 0;
      }
      li {
        padding: 10px;
        box-sizing: border-box;
        list-style: none;
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <h1>记事本</h1>
    <div class="content">
      <input type="text" class="addtext" />
      <ul></ul>
      <div id="page"></div>
    </div>
    <script>
        let AUTH_TOKEN = JSON.parse(localStorage.getItem('userinfo')).token
        axios.defaults.baseURL = 'http://192.168.123.152:8000';
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

        // 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // console.log(response);
    response.data = {...response.data,textname:'liyi'}
    
    return response.data;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

        let list = []
        getdata()

        // 删除
        function dellist(id) {
            axios.delete('/comment/remove/'+id).then(res=>{
                console.log(res);
                
            })    
        }

        $('.addtext').keyup(function(e){
            if (e.keyCode==13) {
                axios.post('/comment/add',{
                text:$('.addtext').val()
            })
            .then(res=>{
                console.log(res);
                
            })
            }
        })


        // 获取

       function getdata(){
        axios({
            url:'/comment/list',
            method:'post',
            data:{
                pageSize:10,
                pageNum:1
            }
        })
        .then(res=>{
            console.log(res);
            list = res.result.list
            setdom()
            
        })
       }
      
      function setdom() {
        let lis = "";
        list.forEach((item) => {
          lis += `  
                 <li>
            <span>${item.real_name}：</span>
            <span class="itemtext" onclick="edittext('${item.text}',${item.id})">${item.text}</span>
            <span>${item.updatedAt}</span>
            <span onclick="dellist(${item.id})">X</span>
            </li>
                `;
        });
        $("ul").html(lis);
      }
    </script>
  </body>
</html>
